<template>
  <div>
    <ContentTitle :info="ctInfo" />

    <!-- 表格 -->
    <el-table :data="list" style="width: 100%" class="mt-10">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="eui" label="EUI" width="180"> </el-table-column>
      <el-table-column prop="name" label="设备名称" width="180">
      </el-table-column>
      <el-table-column prop="mhz" label="频率(MHz)"> </el-table-column>
      <el-table-column prop="onlineZ" label="在线状态"> </el-table-column>
      <el-table-column prop="country" label="国家"> </el-table-column>
      <el-table-column prop="agreement" label="组网协议类型"> </el-table-column>
      <el-table-column
        prop="bTime"
        label="绑定时间"
        :formatter="formatTime"
        width="150"
      >
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <Paging
      :pageSize="pageSize"
      :totalSize="totalSize"
      :currPage.sync="currPage"
      @jump="jump"
    /> -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="totalSize"
      :current-page.sync="currPage"
      @current-change="jump"
    >
    </el-pagination>

    <!-- 新增群组弹窗 -->

    <el-dialog title="新增群组" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form">
        <el-input
          v-model="form.name"
          autocomplete="off"
          placeholder="群组名称"
        ></el-input>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ContentTitle from "@/components/ContentTitle.vue";

import { $gatewayList } from "@/api/index.js";
export default {
  components: {
    ContentTitle,
  },
  data() {
    return {
      // 头部显示信息
      ctInfo: {
        type: "设备",
        text: "网管列表",
        msg: "展示EUI、名称、状态等设备信息，可根据EUI、状态，和绑定时间等条件筛选具体的网关。",
      },
      // 群组列表
      list: [],
      // 页号\条数\总条数
      currPage: 1,
      pageSize: 5, //默认五条
      totalSize: 5,
      // 搜索关键词
      keyword: "",
      // 显示隐藏新增群组的弹窗
      dialogVisible: false,
      form: {
        name: "",
      },
    };
  },
  created() {
    this.getList();
  },
  computed: {
    // 根据总条数和每页条数,计算总页数
    totalPage() {
      return Math.ceil(this.totalSize / this.pageSize); //向上取整
    },
  },
  methods: {
    // 获取列表

    getList() {
      let obj = {
        currPage: this.currPage,
        pageSize: this.pageSize,
      };
      $gatewayList(obj)
        .then((res) => {
          console.log(res);
          this.totalSize = res.total; //修改总条数,计算属性计算总页数
          // 修该online
          let lists = res.data;
          this.list = lists.map((item) => {
            return {
              ...item,
              onlineZ: item.online ? "在线" : "离线",
            };
          });
        })
        .catch((err) => console.log("获取列表失败", err));
    },
    // 翻页
    jump() {
      // 因为是页号改变的回调函数，页号已经变化，直接调用即可
      this.getList();
    },
    // 新增群组，跳出弹窗
    HanderAdd() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style>
</style>